<template>

  <div id="fensan">

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="房源名称">
        <el-input v-model="formInline.name" placeholder="房源名称"></el-input>
      </el-form-item>


      <el-form-item label="租房状态">
        <el-select v-model="formInline.status" placeholder="租房状态">
          <el-option label="已出租" value="已出租"></el-option>
          <el-option label="未出租" value="未出租"></el-option>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="楼栋号">
        <el-input v-model="formInline.num" placeholder="楼栋号"></el-input>
      </el-form-item>
      <el-form-item label="单元号">
        <el-input v-model="formInline.yuan" placeholder="单元号"></el-input>
      </el-form-item>
      <el-form-item label="门牌号">
        <el-input v-model="formInline.pai" placeholder="门牌号"></el-input>
      </el-form-item><br>
      <el-form-item label="户型朝向">
        <el-input v-model="formInline.xiang" placeholder="户型朝向"></el-input>
      </el-form-item>
      <el-form-item label="装修">
        <el-select v-model="formInline.zhuang" placeholder="装修">
          <el-option label="精装" value="精装"></el-option>
          <el-option label="简装" value="简装"></el-option>
          <el-option label="毛坯" value="毛坯"></el-option>
        </el-select>
      </el-form-item><br>
      <el-form-item label="楼层">
        <el-input v-model="formInline.lou" placeholder="楼层"></el-input>
      </el-form-item>
      <el-form-item label="共">
        <el-select v-model="formInline.zong" placeholder="层">
          <el-option label="32" value="32"></el-option>
        </el-select>
      </el-form-item><br>
      <el-form-item label="设置管家">
        <el-select v-model="formInline.guan" placeholder="装修">
          <el-option label="admin" value="admin"></el-option>
          <el-option label="ry" value="ry"></el-option>
        </el-select>
      </el-form-item><br>
      <el-form-item label="房产面积">
        <el-input v-model="formInline.mian" placeholder="房产面积"></el-input>
      </el-form-item><br>
      <el-form-item label="租金">
        <el-input v-model="formInline.money" placeholder="租金"></el-input>
      </el-form-item>
      <h3>付款方式</h3>
      <el-form-item label="押">
        <el-select v-model="formInline.ya" placeholder="押金">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付">
        <el-select v-model="formInline.fu" placeholder="付款">
          <el-option label="1" value="1"></el-option>
          <el-option label="3" value="3"></el-option>
          <el-option label="6" value="6"></el-option>
        </el-select>
      </el-form-item>
      <h3>公共配套</h3>
      <el-checkbox-group v-model="gong">
        <el-checkbox label="客厅"></el-checkbox>
        <el-checkbox label="卫生间"></el-checkbox>
        <el-checkbox label="阳台"></el-checkbox>
        <el-checkbox label="厨房"></el-checkbox>
        <el-checkbox label="空调"></el-checkbox>
        <el-checkbox label="电视"></el-checkbox>
        <el-checkbox label="热水器"></el-checkbox>
        <el-checkbox label="沙发"></el-checkbox>
        <el-checkbox label="洗衣机"></el-checkbox>
        <el-checkbox label="冰箱"></el-checkbox>
      </el-checkbox-group>
      <h3>房间配套</h3>
      <el-checkbox-group v-model="fang">
        <el-checkbox label="电视"></el-checkbox>
        <el-checkbox label="卫生间"></el-checkbox>
        <el-checkbox label="双人床"></el-checkbox>
        <el-checkbox label="单人床"></el-checkbox>
        <el-checkbox label="空调"></el-checkbox>
        <el-checkbox label="门锁"></el-checkbox>
        <el-checkbox label="热水器"></el-checkbox>
        <el-checkbox label="飘窗"></el-checkbox>
        <el-checkbox label="洗衣机"></el-checkbox>
        <el-checkbox label="冰箱"></el-checkbox>
      </el-checkbox-group>



      <el-form-item label="房源图片" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:6100/house/file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

<br>
<br>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
export default {
  name: "index",
  data(){
    return{
      formInline:{
         name:"",
         num:"",
        yuan:"",
        pai:"",
        xiang:"",
        zhuang:"",
        lou:"",
        zong:"",
        guan:"",
        mian:"",
        money:"",
        ya:"",
        fu:"",
        gong:"",
        fang:"",
        pic:"",
        decp:"技能技能你",
        status:"",
      },
      gong:[],
      fang:[],
      imageUrl:"",
      formLabelWidth:"120px",
    }
  },
  created(){

  },
  methods:{

    onSubmit(){
      console.log(this.formInline);
      let gong1 = this.gong.map(a=>a).join(",");
      let fang1 = this.fang.map(a=>a).join(",");
      this.formInline.gong=gong1
      this.formInline.fang=fang1
      alert(JSON.stringify(this.formInline))
      this.axios.post("http://localhost:6100/house/add",this.formInline).then((response) => {
         if (response.data.code==200){
           alert("成功");
           this.$router.push("taitu")
         }
      })
    },
    handleAvatarSuccess(res,file){
        this.imageUrl=URL.createObjectURL(file.raw);
        this.formInline.pic=res;
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
